<!DOCTYPE html>
<html>
<head>
	<title>私信列表</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
	<link rel="stylesheet" href="/css/reset.css" />
	<link rel="stylesheet" href="/css/message.css" />
	<link rel="stylesheet" href="/css/strategyCatalogs.css"/>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
	<link rel="stylesheet" href="/css/strategyCatalogs.css"/>
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/plugins/easyEditor/easyEditor.min.js"></script>

	<script>
        /**
		 * flag:MY_RECIVE 代表当前显示的是我接收到的私信信息
		 *      MY_SENT 代表当前显示的是我发送过的私信信息
         * @type {string}
         */
		var flag='MY_RECIVE';//默认显示我接收到的私信信息
        var dataArr=[];//合并我接收到的私信的数据的容器
		var dataArrMySent=[];//合并我发送过的私信的数据容器
        var currentPage=1;//默认第一页数据
		var totalPage=1;

		var MY_SENT_currentPage=1;
		var MY_SENT_totalPage=1;

        /**
		 * isClickFlag:0代表还没被点击
		 * 			   1代表已经被点击了
         * @type {number}
         */
		var isClickFlag=0;

		//私信id数组
		var ids=[];
        function queryForPage() {
            if(currentPage<=totalPage){
                //获取私信信息
                $.get("/letters",{currentPage:currentPage},function (data) {
                    totalPage=data.pages;
                    $.merge(dataArr,data.list);//合并数组
                    var json={
                        list:dataArr
                    }
                    $(".catalogs").renderValues(json,{
                        getHref:getHref,
                        getReciverId:function(item, value){//获取接收者的id
                            $(item).attr("onclick","initReciverId("+value+");");
                        }
                    })
                });
			}

        }

        //获取我发送过的私信信息
        function queryMysentLetters(){
            if(MY_SENT_currentPage<=MY_SENT_totalPage){
                //获取我发送过的私信
                $.get("/letters/mysentLetters",{currentPage:MY_SENT_currentPage},function (data) {
                    MY_SENT_totalPage=data.pages;
                    $.merge(dataArrMySent,data.list);//合并数组
                    var json={
                        list:dataArrMySent
                    }
                    $("#comment").renderValues(json,{
                        getHref:getHref,
                        getReciverId:function(item, value){//获取发送者的id
                            $(item).attr("onclick","initReciverId("+value+");");
                        }
                    })
                })
			}
		}
        $(function () {
            //获取该用户的游记信息
            queryForPage();
            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if($(document).scrollTop()+$(window).height()>=$(document).height()-0.1){
                    if(flag=='MY_SENT'){
                        MY_SENT_currentPage++;
                        queryMysentLetters();
					}else{
                        currentPage++;
                        queryForPage();
					}
                };
            })


            //实例化一个easyEditor编辑器
            var editor = easyEditor('editor');
            //回复私信
            $("#sendLetterBtn").click(function () {
                //获取接收人的id
                var reciverId=$("#reciverId").val();
                //获取发送内容
                var data = editor.getContent({
                    emojiSign: ['[',']'], //表情分隔符
                    blockSign: '%' //行块分隔符
                });
                var content = data.text
                //发送请求，向数据库添加数据
                $.post("/letters/"+reciverId,{content:content},function (data) {
                    if(data.success){
                        $(document).dialog({
                            type : 'notice',
                            infoText: "发送成功",
                            autoClose: 1500,
                            position: 'center',  // center: 居中; bottom: 底部
                        })
                        $("#closeModelBtn").trigger("click");
                        editor.clearAll();
                    }
                })
            });

            /*//点击  接收的私信  tab标签
            $("#pills-catalog-tab").click(function () {
                //查询我发送过的私信，并且渲染页面
                queryMysentLetters();
                //表示当前显示的是当前用户发送过的私信信息
                flag='MY_RECIVE';

            });*/

            //点击  发送的私信  tab标签
            $("#pills-comment-tab").click(function () {
                //查询我发送过的私信，并且渲染页面
				if(isClickFlag==0){
                    queryMysentLetters();
				}
                //表示当前显示的是当前用户发送过的私信信息
                flag='MY_SENT';
                isClickFlag=1;

            });

            //点击  接收的私信  tab标签
            $("#pills-catalog-tab").click(function () {
                //表示当前显示的是当前用户发送过的私信信息
                flag='MY_RECIVE';

            });

            //点击批量删除按钮
			$("#batchDeleteBtn").click(function () {
                        if(flag=='MY_RECIVE'){
                            $(".revicedLetterCheckbox").css("display","block");
                            $.each($('.revicedLetterCheckbox:checkbox:checked'),function(index,item){
                                ids.push(item.value);
                                $(item).parent().remove();
                            });
                            //批量删除我接收到的私信
                            if(ids.length>0){
                                batchDelete(ids,"DELETE_MY_RECIVE");
                            }
                        }else{
                            $(".sentLetterCheckbox").css("display","block");
                            $.each($('.sentLetterCheckbox:checkbox:checked'),function(index,item){
                                ids.push(item.value);
                                $(item).parent().remove();
                            });
                            //批量删除我发送的私信
                            console.log(ids);
                            if(ids.length>0){
                                batchDelete(ids,"DELETE_MY_SENT");
                            }
                        }

            });

			$("#clearBtn").click(function () {
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: true,
                        content: '您确定要清空所有私信内容吗？请确认！',
                        onClickConfirmBtn: function(){
                            if(flag=='MY_RECIVE'){
                                clearLetters("DELETE_MY_RECIVE");
                            }else{
                                clearLetters("DELETE_MY_SENT");
                            }
                        }
                    });
            })
        })

        function initReciverId(reciverId) {
            $("#reciverId").val(reciverId);
        }

        //批量删除
        function batchDelete(ids2,deltetype){
            $.ajax({
                url:"/letters/"+ids2+"/"+deltetype,
                type:"delete",
                dataType:"json",
                success:function(data){
					if(data.success){
                        //重新刷新数组
                        ids=[];
                        $(document).dialog({
                            type : 'notice',
                            infoText: '删除成功！',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
					}
                }
            })
		}
		function clearLetters(type) {
            $.ajax({
                url:"/letters/"+type,
                type:"delete",
                dataType:"json",
                success:function(data){
                    if(data.success){
                        $(document).dialog({
                            type : 'notice',
                            infoText: '清空成功！',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                        if(type=="DELETE_MY_RECIVE"){
                            $(".MY_RECIVE_dd").remove();
                        }else{
                            $(".MY_SENT_dd").remove();
                        }
                    }

                }
            })
        }
	</script>
</head>

<body>
<input id="reciverId" type="hidden"/>
<div class="search-head">
	<div class="row nav-search">
		<div class="col-2">
			<a href="javascript:history.go(-1);">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
		</div>
		<!--<div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>-->
	</div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
	<li class="nav-item ">
		<a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
			<span>接收的私信</span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
			<span>发送的私信</span>
		</a>
	</li>
</ul>
<div class="tab-content " id="pills-tabContent">
	<div class="tab-pane fade show active" id="pills-catalog">
		<div class="catalogs">
			<dl class="itemList" render-loop="list">
				<dd class="MY_RECIVE_dd">
					<input type="checkbox" class="revicedLetterCheckbox" render-value="list.id" style="display: none"/>
					<a render-key="list.user.id" render-fun="getReciverId" href="javascript:"  data-toggle="modal" data-target="#myModal"><p render-html="list.content"></p></a>
					<p><a data-href="../userProfiles.html?userId=" render-key="list.user.id" render-fun="getHref">
						<img render-src="list.user.headImgUrl" style="width: 20px;height: 20px;"/>
						<span render-html="list.user.nickName"></span>
					</a>
					</p>
					<p render-html="list.createTime"></p>
				</dd>
			</dl>
		</div>

	</div>
	<div class="tab-pane fade " id="pills-comment">
		<div id="comment">
			<dl class="itemList" render-loop="list">
				<dd class="MY_SENT_dd">
					<input type="checkbox" class="sentLetterCheckbox" render-value="list.id" style="display: none"/>
					<p render-html="list.content"></p>
					<p><a data-href="../userProfiles.html?userId=" render-key="list.user.id" render-fun="getHref">
						<img render-src="list.user.headImgUrl" style="width: 20px;height: 20px;"/>
						<span render-html="list.user.nickName"></span>
					</a>
					</p>
					<p render-html="list.createTime"></p>
				</dd>
			</dl>
		</div>
	</div>
</div>
</div>

<div class="operation">
	<button class="btn" id="clearBtn">清空</button>
	<button class="btn" id="batchDeleteBtn">批量删除</button>
</div>

<!-- Modal：回复私信 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<div id="editor" style="width:100%;height: 200px"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" id="closeModelBtn">关闭</button>
				<button type="button" class="btn btn-primary" id="sendLetterBtn">回复</button>
			</div>
		</div>
	</div>
</div>

</body>
</html>